<template>
	<view class="login_bg">
		<view  class="indexx_top">
			<view class="ding">
				<view class="dingg">
					<view class="dingwei"><image src="../../static/images/dingwei.png" mode="widthFix"></image></view>
					<view><p class="city">苏州</p></view>
				</view>
				<view><p class="huan_city">更换城市></p></view>
			</view>
			<view class="menuList_top">
				<view class="menuList">
					<view :class="(currIndex==index) ? 'curr' : ''" v-for="(item,index) in menuList" @click="catchTab(index)">{{item}}</view>
				</view>
				<view class="shaixuan" @click="toggle('bottom')"><image src="../../static/images/ic_saixuan-5c67bca7.png" mode="widthFix"></image></view>
			</view>
			<view>
				<uni-popup ref="popup" :type="type" :animation="false" :maskClick="true" @change="change" >
				    <view class="aitlce">
						<view class="aitlcee">
							<view class="aitlce_top">
								<view class="sx">筛选</view>
								<view class="sx_pic"><image src="../../static/images/ic_VIP-5f9eb51a.png" mode="widthFix"></image></view>
							</view>
							<view class="close"><image src="../../static/images/ic_close-b727ff3a.png" mode="widthFix"></image></view>
						</view>
						
						<view class="huakuai">
							<view class="huakuaii">
								<view class="txt">相似度</view>
								<view class="txt">
									<text>60%</text>
									<text>-</text>
									<text>80%</text>
								</view>
							</view>
							<view >
							  <slider style="width: 100%;margin-left:0rem;height: 10px;"
							    min="0" 
							    max="100" 
							    step="1" 
							    value="{{sliderValue}}" 
							    bindchange="onSliderChange" 
								block-size="13"
							  />
							 
							</view>
							
						</view>
						<view class="huakuai">
							<view class="huakuaii">
								<view class="txt">距离</view>
								<view class="txt">
									<text>50</text>
									<text>公里以内</text>
								</view>
							</view>
							<view >
							  <slider style="width: 100%;margin-left:0rem;height: 5px;"
							    min="0" 
							    max="100" 
							    step="1" 
							    value="{{sliderValue}}" 
							    bindchange="onSliderChange" 
								block-size="13"
							  />
							</view>
						</view>
						<view class="set">
							<view class="set_list">
								<view class="set_listt">
									<view class="set_list_lefts">优先查看在线女士</view>
								</view>
								<view><switch :checked="isChecked" @change="handleSwitchChange"  style="margin-left: 10vw;"/></view>
							</view>
						</view>
						<view class="btn">
							<view class="cz_btn">重置</view>
							<view class="complete_btn">完成</view>
						</view>
						
					</view>
				</uni-popup>
			</view>
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="autoplay"
			    :duration="duration" v-show="bannerEable">
				<swiper-item><image src="../../static/images/banner1.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
				<swiper-item><image src="../../static/images/banner2.png" mode="widthFix" class="banner" @click="hideBanner"></image></swiper-item>
			</swiper>
		</view>

		<view v-show="currIndex==0" class="qh1">
			<view class="index_list">
				<view class="index_list_01" @click="userDetail(item.id)" v-for="(item,index) in indexData.rem_list.data">
					<view>
						<view>
							<view class="index_list_01_top">
								<view class="xsd"><p>相似度|</p><p>76%</p></view>
								<view class="zx" v-show="item.is_online">在线</view>
							</view>
							<view class="index_list_01_img" :style="{background:'url('+cdnUrl+'/'+item.album_list[0].file_path+')'}"></view>
							<view class="sex">
								<view class="sex_img"><image src="../../static/images/sex.png" mode="widthFix"></image></view>
								<p class="age">{{item.age}}</p>
								<p class="cs">苏州</p>
							</view>
						</view>
						<view class="name">
							<view class="nicheng">{{item.nickname}}</view>
							<view class="ico"><image src="../../static/images/ico.png" mode="widthFix"></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="currIndex==1" class="qh1">
			<view class="index_list_02"  @click="userDetail(item.id)" v-for="(item,index) in indexData.online_list.data">
				<view class="index_line">
					<view class="index_linee">
									<view class="index_line_zp">
										<view class="index_line_photo"><image src="../../static/images/photo.png" mode="widthFix"></image></view>
										<view class="index_line_num">6</view>
									</view>
									<view class="index_line_img" :style="{background:'url('+cdnUrl+'/'+item.online_list[0].file_path+')'}"></view>
									<view class="index_line_xsd">
										<view class="xsd_line"><p>相似度|</p><p>80%</p></view>
									</view>
							</view>
					<view class="index_lineee">
								<view class="index_lineee_name">
									<view class="index_lineee_namee">{{item.nickname}}</view>
									<view class="index_lineee_line">在线</view>
								</view>
								<view class="icoo"><image src="../../static/images/ico.png" mode="widthFix"></image></view>
								<view class="sexx">
									<p class="agee">{{item.age}}</p>
									<p class="css">苏州</p>
								</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view v-show="currIndex==2" class="qh1">
			<view class="index_list_02"   @click="userDetail(item.id)" v-for="(item,index) in indexData.new_list.data">
				<view class="index_line">
					<view class="index_linee">
									<view class="index_line_zp">
										<view class="index_line_photo"><image src="../../static/images/photo.png" mode="widthFix"></image></view>
										<view class="index_line_num">6</view>
									</view>
									<view class="index_line_img"  :style="{background:'url('+cdnUrl+'/'+item.new_list[0].file_path+')'}"></view>
									<view class="index_line_xsd">
										<view class="xsd_line"><p>相似度|</p><p>80%</p></view>
									</view>
							</view>
					<view class="index_lineee">
								<view class="index_lineee_name">
									<view class="index_lineee_namee">{{item.nickname}}</view>
									<view class="index_lineee_line">在线</view>
								</view>
								<view class="icoo"><image src="../../static/images/ico.png" mode="widthFix"></image></view>
								<view class="sexx">
									<p class="agee">{{item.age}}</p>
									<p class="css">苏州</p>
								</view>
					</view>
				</view>
			</view>
		</view> -->
		<view v-show="currIndex==2" class="qh1">
			<view class="index_list_02"     @click="userDetail(item.id)" v-for="(item,index) in indexData.new_list.data">
				<view class="index_line">
					<view class="index_linee">
									<view class="index_line_zp">
										<view class="index_line_photo"><image src="../../static/images/photo.png" mode="widthFix"></image></view>
										<view class="index_line_num">6</view>
									</view>
									<view class="index_line_img"   :style="{background:'url('+cdnUrl+'/'+item.new_list[0].file_path+')'}"></view>
									<view class="index_line_xsd">
										<view class="xsd_line"><p>相似度|</p><p>80%</p></view>
									</view>
							</view>
					<view class="index_lineee">
								<view class="index_lineee_name">
									<view class="index_lineee_namee">{{item.nickname}}</view>
									<view class="index_lineee_line">在线</view>
								</view>
								<view class="icoo"><image src="../../static/images/ico.png" mode="widthFix"></image></view>
								<view class="sexx">
									<p class="agee">{{item.age}}</p>
									<p class="css">苏州</p>
								</view>
					</view>
				</view>
			</view>
		</view>
		<footerVue :currIndex="0"></footerVue>
<!-- 		
		<view class="footer">
			<view class="footer_nav">
				<view class="footer_nav_li" @click="index()">
					<view class="footer_nav_img"><image src="../../static/images/home.png" alt="" mode="widthFix"></image></view>
					<view class="txt">首页</view>
				</view>
				
				<view class="footer_nav_li" @click="dongtai()">
					<view class="footer_nav_img"><image src="../../static/images/faxian.png" alt="" mode="widthFix"></image></view>
					<view class="txt">动态</view>
				</view>
				
				<view class="footer_nav_li" @click="liuyan()">
					<view class="footer_nav_img"><image src="../../static/images/message.png" alt="" mode="widthFix"></image></view>
					<view class="txt">留言</view>
				</view>
				
				<view class="footer_nav_li" @click="personal()">
					<view class="footer_nav_img"><image src="../../static/images/wd.png" alt="" mode="widthFix"></image></view>
					<view class="txt">我的</view>
				<view>
			</view>    
		<view>		
		
		
		
		
		
		
	</view>	
</view>	
</view>	
</view>	 -->
<!-- 	<view>
			包裹页面所有内容的元素u-page同级，且在它的下方 -->
			<!-- <u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar> -->
	<!-- </view> -->

	
</view>	

</template>

<script>
	import request from '../../utils/http.js'
	import footerVue from '../../components/public/footer.vue'	
  export default {
    data() {
      return {
				autoplay:true,
				interval:5000,
				duration:500,
				bannerEable:true,
				bs:false,
				isCheckeddd:false,
				menuList:['星期九','在线','新来'],
				currIndex:0,
				currIndex1:0,
				// showPopup: false, // 控制弹出层的显示和隐藏  
				type: 'bottom',
				isPopupShow: false,
				sliderValue: 0 ,// 初始值
				indexData:[],
				page:1
				
      }
    },
	computed:{
		cdnUrl(){
			return uni.cdnURL
		}
	},
	onLoad() {
		// console.log(uni.getStorageSync("token"))
		
	},
	mounted() {
		this.getIndexData()
	},
	components:{
		footerVue
	},
    methods: {
		toggle(type) {
		    this.type = type;
		    this.$refs['popup'].open();
		},
     	catchTab(index){
			this.currIndex = index
		},
		userDetail(id){
			uni.navigateTo({
				url:'/pages/index/index_article?id='+id
			})
		},
		getIndexData(){
			let gender = uni.getStorageSync("sex")
			request({
				url: '/Index/index',
				method:'post',
				data: {gender:gender,page:this.page},
			}).then(res => {
				let result = res.data;
				if(result.code==1){
					this.indexData = result.data
					// console.log(result.data.rem_list)
				}
			}).catch(err => {
			  console.error(err);
			});
		}
	},
			
			
			
  }
</script>

<style>
  @import "../../static/css/index.css";
  .index_list_01_img{
	background-size: contain!important;
	background-repeat: no-repeat!important;
  }
</style>
